.q-float-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 810;
  transition: visibility 300ms cubic-bezier(.36, .66, .04, 1);

  .q-float-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, .3);
    opacity: 0;
    transition: opacity 150ms ease-in;
  }

  .q-float-overlay-visible {
    opacity: 1;
  }

  .q-float-layout {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 600px;
    max-height: 950px;
    border-radius: 40px 40px 0 0;
    transform: translate3d(0, 100%, 0);
    background-color: #fff;

    .q-float-body {
      max-height: 828px;
      min-height: 514px;

      .q-float-scroll {
        max-height: 798px;
        min-height: 484px;
      }
    }
  }
}

.q-float-container-active {
  visibility: visible;

  .q-float-overlay {
    opacity: 1;
  }

  .q-float-layout {
    transform: translate3d(0, 0, 0);
  }
}
